<template>
    <view class="container">
        <u-form :model="form" :rules="rules" ref="uForm" label-width="90">

            <!-- 姓名 -->
            <u-form-item label="姓名" prop="relName" borderBottom>
                <u-input v-model="form.relName" placeholder="请输入真实姓名" />
            </u-form-item>

            <!-- 性别 -->
            <u-form-item label="性别" prop="sex" borderBottom>
                <u-radio-group v-model="form.sex">
                    <u-radio name="0" label="男" :customStyle="{marginRight: '40rpx'}"></u-radio>
                    <u-radio name="1" label="女"></u-radio>
                </u-radio-group>
            </u-form-item>


            <!-- 手机号 -->
            <u-form-item label="手机号" prop="phone" borderBottom>
                <u-input v-model="form.phone" placeholder="请输入手机号码" />
            </u-form-item>
            <u-form-item label="入驻游戏" prop="gameId" borderBottom>
                <u-input v-model="form.gameId" placeholder="请输入入驻游戏" />
            </u-form-item>
            <u-form-item label="游戏区服" prop="gameArea" borderBottom>
                <u-radio-group
                    v-model="form.gameArea"
                    placement="row">
                    <u-radio
                        :customStyle="{marginRight: '8px'}"
                        v-for="(item, index) in radiolist"
                        :key="index"
                        :label="item.label"
                        :name="item.value"
                    >
                    </u-radio>
                </u-radio-group>
            </u-form-item>
            <u-form-item label="游戏马甲" prop="gameName" borderBottom>
                <u-input v-model="form.gameName" placeholder="请输入游戏马甲" />
            </u-form-item>


        </u-form>
        <view class="protocol">
            <u-checkbox-group v-model="checkboxValue" placement="column">
                <u-checkbox :name="1"></u-checkbox>
            </u-checkbox-group>
            本人已阅读并签署
            <text class="link" @click="goProtocol(3)">《打手入驻协议》</text>
        </view>
        <view style="margin: 40rpx">
            <u-button type="primary" shape="circle" text="提交申请" @click="submit" />
        </view>
    </view>
</template>

<script>
import {addJoinApi, vipJoinApi} from "@/sheep/api/index";
import { baseUrl, clientid } from "@/sheep/request/baseUrl";
export default {
    data() {
        return {
            radiolist:[
                {
                    label: "端游",
                    value: "1"
                },
                {
                    label: "手游",
                    value: "2"
                },
            ],
            form: {
                relName: "",
                sex: "0",
                phone: "",
                gameName: "",
                gameArea: "",
                gameId: "",
            },
            fileList1: [],
            fileList2: [],
            fileList3: [],
            rules: {
                relName: [{ required: true, message: "请输入", trigger: "blur" }],
                gameName: [{ required: true, message: "请输入", trigger: "blur" }],
                gameId: [{ required: true, message: "请输入", trigger: "blur" }],
                gameArea: [{ required: true, message: "请选择", trigger: "change" }],
                phone: [
                    { required: true, message: "请输入", trigger: "blur" },
                    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" },
                ]
            },
            checkboxValue: [0],
        };
    },
    methods: {
        // 文件超出大小限制
        oversize() {
            uni.showToast({
                title: "上传最大不能超过2M",
                icon: "none",
            });
        }, // 图片上传处理
        uploadFile(e, field) {
            // 这里需要实现实际的上传逻辑
            const files = e.file;
            this.form[field].push(...files);
        },
        // 上传图片
        async afterRead(event) {
            let lists = [].concat(event.file);
            let fileListLen = this[`fileList${event.name}`].length;
            lists.map((item, index) => {
                this[`fileList${event.name}`].push({
                    ...item,
                    status: "uploading",
                    message: "上传中",
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url, lists, event);
                let item = this[`fileList${event.name}`][fileListLen];
                this[`fileList${event.name}`].splice(
                    fileListLen,
                    1,
                    Object.assign(item, {
                        status: "success",
                        message: "",
                        url: result.url,
                        name: result.fileName,
                        ossId: result.ossId,
                    })
                );
                fileListLen++;
            }
        },
        uploadFilePromise(url, lists, event) {
            let token = uni.getStorageSync("token");
            let headerToken = "Bearer " + token;
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: baseUrl + "/resource/oss/upload",
                    filePath: url,
                    name: "file",
                    header: {
                        Authorization: headerToken,
                        clientId: "be7052a7e4f802c20df10a8d131adb12",
                    },
                    formData: {
                        user: "test",
                    },
                    success: (res) => {
                        let data = JSON.parse(res.data);
                        if (data.code == 200) {
                            resolve(data.data);
                        } else {
                            if (lists.length > 0) {
                                lists.map((item, index) => {
                                    this[`fileList${event.name}`].splice(index, 1);
                                });
                            }
                            uni.showToast({
                                title: data.msg,
                                icon: "none",
                            });
                        }
                    },
                });
            });
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 删除图片
        deleteFile(e, field) {
            this.form[field].splice(e.index, 1);
        },
        goProtocol(value) {
            uni.navigateTo({ url: "/pages/protocol/index?type=" + value });
        },
        // 提交表单
        submit() {
            if (!this.checkboxValue[0]) {
                uni.showToast({
                    title: "请同意申请入驻需知",
                    icon: "none",
                });
                return;
            }
            this.$refs.uForm.validate().then((valid) => {
                if (valid) {
                    uni.showLoading({ title: "提交中..." });
                    // 这里调用实际提交接口
                    vipJoinApi(this.form).then((res) => {
                        if (res.code === 200) {
                            uni.hideLoading();
                            uni.showToast({ title: "提交成功" });
                            setTimeout(() => {
                                uni.switchTab({
                                    url: "/pages/mine/index",
                                });
                            }, 1000);
                        }
                    });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 40rpx;
    background-color: #fff;
    margin-bottom: 60rpx;
}

.tips {
    font-size: 24rpx;
    color: #999;
    margin-left: 20rpx;
}

::v-deep .u-upload__wrap {
    border: 2rpx dashed #ddd;
    border-radius: 16rpx;
    padding: 20rpx;
}

::v-deep .u-form-item__body {
    padding: 30rpx 0;
}

::v-deep .u-radio-group {
    display: flex;
}
.protocol {
    margin-top: 40rpx;
    font-size: 24rpx;
    color: #999;
    display: flex;
    .link {
        color: #2979ff;
    }
}
</style>
